<!--
 * @description: 剧本上传
 * @fileName: ScreenUpload
 * @author: 17076
 * @date: 2025/3/3-上午9:11
 * @version: V1.0.0
-->

<template>
  <div class="screen-content">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="card screen-left">
          <div class="form-content" :style="{ height: $baseTableHeight(-20) + 'px' }">
            <el-form ref="form" :model="uploadForm" :rules="rules" label-width="90px" label-position="top">
              <el-form-item label="剧本名称" prop="playName">
                <span v-if="$route.query.id">{{ uploadForm['playName'] }}</span>
                <el-input v-else v-model="uploadForm['playName']" placeholder="请输入剧本名称" />
              </el-form-item>
              <el-form-item label="剧本上传" prop="file">
                <div v-if="$route.query.id">
                  <i class="el-icon-document"/>
                  <span style="margin-left: 10px">{{ uploadForm['fileName'] }}</span>
                </div>
                <el-upload
                  v-else
                  class="upload-demo"
                  action=""
                  :on-remove="handleRemove"
                  :on-change="handleFileChange"
                  :limit="1"
                  accept=".doc,.docx,.txt"
                  :file-list="fileList"
                  :auto-upload="false"
                >
                  <el-button size="small">上传剧本</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传doc/docx/txt文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="作品风格" prop="playStyle">
                <el-row :gutter="10">
                  <el-col v-for="item in styleList" :key="item.code" :span="6">
                    <div :class="['flex-column', 'style-item', uploadForm['playStyle'] === item.code ? 'style-item-active' : '']" @click="handleStyle(item)">
                      <el-image :src="downloadUrl + item.code" />
                      <span>{{ item.name }}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="!$route.query.id" class="liner-button generate-button" @click="handleCreate">{{ Object.keys(playContent).length !== 0 ? '重新生成' : '智能生成' }}</div>
          <div v-else style="height: 40px"></div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="card screen-right" :style="{ height: $baseTableHeight(-100) + 'px' }">
          <pre v-if="playContent['buffer']" v-text="playContent['buffer']" />
          <el-empty v-if="Object.keys(playContent).length === 0 && !isLoading" description="暂无章节内容" :style="{ height: $baseTableHeight(-60) + 'px' }" />
          <img v-if="isLoading" src="~@/assets/write/loading.gif" class="loading">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { uploadPlay, selectDetail } from '@/api/play'
export default {
  name: 'ScreenUpload',
  data() {
    return {
      uploadForm: {},
      rules: {
        file: [
          { required: true, message: '请上传剧本', trigger: 'blur' }
        ],
        playName: [
          { required: true, message: '请输入剧本名称', trigger: 'blur' }
        ],
        playStyle: [
          { required: true, message: '请选择作品风格', trigger: 'blur' }
        ]
      },
      // 文件下载地址
      downloadUrl: baseURL + commonDownloadFile,
      // 风格列表
      styleList: JSON.parse(sessionStorage.getItem('playStyle')),
      // 上传的剧本内容
      playContent: {},
      fileList: [],
      // 是否正在生成
      isLoading: false
    }
  },
  mounted() {
    // 存在id说明从作品信息界面进入
    if (this.$route.query.id) {
      this.fetchData()
    }
  },
  methods: {
    // 查询剧本详情
    fetchData() {
      selectDetail({ id: this.$route.query.id }).then(res => {
        this.$set(this.uploadForm, 'playStyle', res.data['playStyleType'])
        this.$set(this.uploadForm, 'playName', res.data['playName'])
        this.$set(this.uploadForm, 'fileName', res.data['fileName'])
        this.$set(this.playContent, 'buffer', res.data['playContext'])
      })
    },
    // 文件选中
    handleFileChange(file) {
      this.$set(this.uploadForm, 'file', file.raw)
    },
    handleRemove(file, fileList) {
      this.$set(this.uploadForm, 'file', '')
    },
    // 风格确认
    handleStyle(item) {
      if (this.$route.query.id) {
        return
      }
      this.$set(this.uploadForm, 'playStyle', item.code)
    },
    // 智能生成
    handleCreate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isLoading = true
          const formData = new FormData()
          formData.append('file', this.uploadForm['file'])
          formData.append('playStyle', this.uploadForm['playStyle'])
          formData.append('playName', this.uploadForm['playName'])
          uploadPlay(formData).then(res => {
            this.isLoading = false
            this.playContent = res.data
            if (this.playContent['listByFile'] && this.playContent['listByFile'].length !== 0) {
              const playId = this.playContent['listByFile'][0]['playId']
              // 保存剧本id
              this.$emit('savePlay', playId)
            }
          }).catch(() => {
            this.isLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.screen-content {
  margin-top: 10px;
  color: #FFFFFF;
  .card {
    background: $base-content-background;
    padding: 20px 10px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .screen-left {
    //position: relative;
    .form-content {
      overflow: auto;
      padding: 0 10px;
      //margin-bottom: 80px;
    }
    .generate-button {
      margin-top: 10px;
    }
    .style-item {
      align-items: center;
      cursor: pointer;
      margin-bottom: 10px;
      .el-image {
        width: 100%;
        height: 100px;
        border-radius: 8px;
        border: 1px solid $base-content-background;
      }
      span {
        margin-top: 10px;
        font-size: 12px;
      }
      &-active {
        .el-image {
          border: 1px solid $base-color-default;
        }
        span {
          color: $base-color-default;
        }
      }
    }
  }
  .screen-right {
    position: relative;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    //.confirm-button {
    //  position: absolute;
    //  bottom: 20px;
    //  right: 20px;
    //  width: 200px;
    //}
    .loading {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    pre {
      background: #272C36;
      border: 1px solid #39414E;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 8px;
      margin-bottom: 10px;
      font-size: 14px;
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
}
</style>
